<template>
  <div class="collectorsListContainer">
    <div class="collectorList">
      <div class="collectorCard" v-for="item in collectors" :key="item.userId">
        <div class="collectorAvatar">
          <img :src="`${item.avatarUrl}?param=100y100`" alt="" />
        </div>
        <div class="collectorInfo">
          <div>{{ item.nickname }}</div>
          <div v-if="item.signature">{{ item.signature }}</div>
        </div>
      </div>
    </div>

    <div class="paginationCpnt app-pagination" v-if="total > 0">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        background
        :pageSize="60"
        v-model:currentPage="page"
      />
    </div>
    <div v-else class="empty">暂无收藏者</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { usePlayListCollector } from "@/hooks/albumQueryHook";

const page = ref(1);
const limit = 60;

const props = defineProps<{
  id: number;
}>();

const { collectors, total, query } = usePlayListCollector();
onMounted(() => {
  query({ id: props.id, limit, offset: (page.value - 1) * limit });
});

watch(
  () => page.value,
  (n, o) => {
    if (n) {
      query({ id: props.id, limit, offset: (n - 1) * limit });
    }
  }
);
</script>

<style lang="less">
.collectorsListContainer {
  display: flex;
  flex-wrap: wrap;
  .collectorList {
    display: flex;
    flex-wrap: wrap;

    .collectorCard {
      width: 33%;
      margin-bottom: 20px;
      display: flex;

      .collectorAvatar {
        width: 92px;
        height: 92px;
        cursor: pointer;
        img {
          width: 92px;
          height: 92px;
          border-radius: 50%;
        }
      }
      .collectorInfo {
        height: 90px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 10px;
        > div {
          font-size: 14px;
          color: #373737;
          &:first-child {
            cursor: pointer;
            &:hover {
              color: #333;
            }
          }
          &:last-child {
            font-size: 12px;
          }
        }
      }
    }
  }
  .paginationCpnt {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  .empty {
    width: 100%;
    text-align: center;
    margin-top: 20px;
    color: #9f9f9f;
  }
}
</style>
